<template>
    <view>
        <view class="uni-padding-wrap" v-if="banners.length>0">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                            :duration="duration">
                        <swiper-item v-for="(item, index) in banners" @tap="$utils.n.ngt(item.actionLink)">
                            <image
                                    lazy-load
                                    mode="aspectFill"
                                    :src="item.imgUrl + '?x-oss-process=image/resize,h_528/auto-orient,1'"
                                    class="image height100"
                            ></image>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <uni-notice-bar v-if="listData.length>0" showIcon="true" scrollable="true" single="true" text="报名参加活动快速脱单。。。"></uni-notice-bar>
        <st-uni-nav :fill="true"  :options="navGripOptions" @click="gridChange" />
        <uni-group title="报名中活动" class="activity-group">
            <uni-card class="activity-card" v-for="(item,index) in listData" @click="goDetail(item)">
                <view class="uni-media-list">
                    <view class="uni-media-list-logo">
                        <image :src="item.titleUrl"></image>
                    </view>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top font-size-md">{{item.title}}</view>
                      <view class="uni-media-list-text-body uni-text  font-size-sm">
                        {{$utils.date.dateFomatWeek(item.startTime)}}
                      </view>
                        <view class="uni-media-list-text-bottom uni-ellipsis font-size-sm">
                            <text>
                                {{item.introduced}}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="uni-card-footer">
                    <view class="uni-card-link">{{item.participateTotal}}/{{item.participateLimitTotal}} 人
                    </view>
                    <view class="uni-card-link">
                        <!--              如果用户未登录，显示报名状态无意义        -->
                        报名中{{hasLogin ?(item.isParticipate ? '(已报名)': '(未报名)'):''}}
                    </view>
                </view>
            </uni-card>
            <uni-list :border="true" v-show="listData.length ==0">
                <uni-list-item title="暂无更多数据" class="no-content"></uni-list-item>
            </uni-list>
        </uni-group>
      <LoginPopup ref="loginPopup"></LoginPopup>
    </view>
</template>

<script>
    import {mapState} from 'vuex'

    import StUniNav from "../../components/StUniNav";
    import LoginPopup from "../../components/login/LoginPopup.vue";
    export default {
        components: {StUniNav,LoginPopup},
        computed:{
          ...mapState([
            // 用户是否已登录
            'hasLogin',
          ]),
        },
        data() {
            return {
              // options和当前页面属性冲突，这里改个名字
                navGripOptions: [{
                    iconfont: 'icon-huodong',
                    text: '历史活动',
                    url: '/pages/activity/activity-list'
                },{
                    iconfont: 'icon-huodong',
                    text: '我的活动',
                    url: '/pages/user/my-activity'
                }],
                // 列表信息
                listData: [],
                banners: [],
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500
            }
        },
        onLoad() {
            this.loadBanner()
            this.loadData()

        },

        onTabItemTap(e) {
            uni.setStorageSync('tabItemIndex', e.index)
            this.loadData()
        },
        onReady() {
        },
        onPullDownRefresh() {
        },
        onReachBottom() {
        },
        methods: {
            gridChange(e) {

              // 点击我的活动，如果用户未登录提示登录
              if (!this.hasLogin && e.index == 1) {
                this.$refs.loginPopup.open()
                return
              }
              uni.navigateTo({
                url:  this.navGripOptions[e.index].url
              })
            },
          // 轮播图加载
            loadBanner: function () {
                this.$http.get('/banner/getList?isDisabled=' + false).then(res => {
                    this.banners = res.data || []
                }).finally(() => {
                })
            },
          // 加载报名中的活动数据
            loadData: function () {
                this.$http.get('/app/activity/signing/getPage').then(res => {
                    this.listData = res.data.records || []
                }).finally(() => {
                })
            },
          // 跳转到活动详情页面
            goDetail(data) {
                uni.navigateTo({
                    url: '/pages/activity/detail?id=' + data.id
                })
            }
        },
        watch: {
          hasLogin(val){
            // 登录成功后刷新数据
            if (val === true) {
              this.loadData()
            }
          }
        }
    }
</script>

<style>
    .uni-padding-wrap {
        padding: 0 0 0 0;
    }

  .uni-media-list-logo {
        height: 80px;
        width: 80px;
        margin-right: 8px;
    }

    .uni-media-list-body {
        height: 65px;
    }

    .uni-card {
        margin: 4px 0 !important;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, .3);
    }
    .activity-card .uni-media-list-text-top{
        font-size: 14px !important;
    }
    .activity-card .uni-media-list-text-body{
        font-size: 12px!important;
    }

    .image {
        width: 100%;
    }
</style>
